<template>
    <view>
        <u-popup
            class="showPopup"
            v-model="showRule"
            :isTransparent="true"
            mode="center"
            :mask-close-able="false"
        >
            <view>
                <view class="newCustomWhite">
                    <scroll-view :scroll-y="true" class="newCustomList">
                        <view class="ruleTitle">活动规则</view>
                        <view class="rules">
                            <view
                                class="rule-item"
                                v-for="item in rules"
                                :key="item"
                                >{{ item }}</view
                            >
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="closeIcon">
                <image
                    @click="onClose()"
                    class="advertisement-image"
                    src="@/static/x.png"
                ></image>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'ShowPeopleCustom',
    props: {
        showRule: {
            type: Boolean,
            default: false,
        },
        userInfo: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            rules: [
                '1：平台新注册用户（未在酒秒达小程序商城下过订单的用户）在新人专区里购买指定产品，即可参与全额返券活动，每位用户只可参与一次，酒水产品购买数量不设限制，买越多，返越多。如发生退单，系统将自动扣除已发放的优惠券。',
                '2：返券金额以最终成交金额为准，单张优惠券金额=单件产品价格÷10。返券数量以最终成交数量为准，返券数量=成交数量×10',
                '举例说明：',
                '下单“特醇嘉士伯8°p大瓶 600ML *12 ”1件，商城售价72.8元，系统自动向用户发送“7.28元无门槛优惠券”10张，以此类推；',
                '下单“特醇嘉士伯8°p大瓶 600ML *12 ”5件，商城售价72.8元，系统自动向用户发送“7.28元无门槛优惠券”10×5=50张。',
                '以此类推。',
                '3：新人专区全额返券活动的优惠券适用于酒秒达小程序商城所有正价酒水产品（小吃、扑克牌等非酒水商品除外），每单仅可使用一张无门槛优惠券',
                '4：优惠券自用户获得优惠券之日起365天内使用，过期无效，不退不补。',
                '5：该优惠券每笔订单仅可使用一张，且每笔订单只可享受一种优惠，顾客可选择优惠力大最大的优惠进行结算。',
            ],
        };
    },
    onLoad() {},
    methods: {
        onClose() {
            this.$emit('onClose');
        },
    },
};
</script>

<style lang="scss" scoped>
.newCustomList {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    border-radius: 24rpx;
    background-color: #000000;
    opacity: 0.7;
    color: #fff;
}
.closeIcon {
    margin-top: 50rpx;
    text-align: center;

    .advertisement-image {
        border-radius: 50%;
        border: 2px solid #fff;
        width: 40rpx;
        height: 40rpx;
    }
}
.ruleTitle {
    width: 100%;
    margin-top: 20rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    // color: #e80d0d;
}
.rules {
    padding: 20rpx 35rpx;
}
.rule-item {
    word-break: break-all;
}
</style>
